<template>
    <el-dialog title="选择题集" :close-on-click-modal="false" v-model="visible" :width="1200" append-to-body @closed="close">
        <div :style="`height: ${height}px;`">
            <el-container>
                <el-container class="is-vertical">
                    <div class="panel-search-box">
                        <div class="panel-search">
                            <el-input v-model="search.name" style="width: 150px;" placeholder="名称搜索" clearable></el-input>
                            <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                        </div>
                    </div>
                    <el-main class="nopadding">
                        <scTable ref="table_member_all"  @dataChange="changedData" :apiObj="apiObj" remoteSort @select="selectOne" @select-all="selectionAll">
                            <el-table-column type="selection" width="50"></el-table-column>
                            <el-table-column label="题集部门" prop="name" width="300"></el-table-column>
                            <el-table-column label="题集分类" prop="category.name"></el-table-column>
                            <el-table-column label="题集序号" prop="sortNumber"></el-table-column>
                            <el-table-column label="备注" prop="remarks"></el-table-column>
                            <el-table-column label="创建时间" prop="addtime"></el-table-column>
                        </scTable>
                    </el-main>
                </el-container>
            </el-container>
        </div>
        <el-dialog :title="`已选择用户`" :close-on-click-modal="false" v-model="selected_visible" :width="1000" append-to-body @closed="selected_visible = false">
            <div style="height: 450px;">
				<el-button type="danger" plain icon="el-icon-delete" :disabled="selectedMembers.length==0" @click="deleteSelectedMembers">移除</el-button>
                <el-container class="is-vertical">
                    <el-main class="nopadding">
                        <scTable ref="table_selected" :hidePagination="true" remoteSort :data="temporary_selected" @selection-change="selectionMembers">
                            <el-table-column type="selection" width="50"></el-table-column>
                            <el-table-column label="题集部门" prop="name" width="300"></el-table-column>
                            <el-table-column label="题集分类" prop="category.name"></el-table-column>
                            <el-table-column label="题集序号" prop="sortNumber"></el-table-column>
                            <el-table-column label="备注" prop="remarks"></el-table-column>
                            <el-table-column label="创建时间" prop="addtime"></el-table-column>
                            <el-table-column label="操作" fixed="right" align="right" width="140">
                                <template #default="scope">
                                    <el-button type="text" size="small" @click="table_delete(scope.row, scope.$index)">移除</el-button>
                                </template>
                            </el-table-column>
                        </scTable>
                    </el-main>
                </el-container>
            </div>
            <template #footer>
                <el-button @click="selected_visible = false">关闭</el-button>
                <el-button @click="handleChange" type="primary">确定 <span v-if="temporary_selected.length">({{temporary_selected.length}})</span> </el-button>
            </template>
        </el-dialog>
        <template #footer>
            <el-button type="primary" v-if="selected.length>0" @click="openSelection">查看已选{{selected.length}}个</el-button>
            <el-button @click="close" >关闭</el-button>
            <el-button type="primary" :disabled="selected.length==0" @click="submitAdd">确定</el-button>
        </template>
    </el-dialog>
</template>

<script>
export default {
    props: {
        height: { type: String, default: '500' },
    },
    components: {
    },
    data(){
        return {
            // 所有员工筛选
            search:{
                name: null,
            },
            apiObj: this.$API.examination.exami.list,
            visible: false,
            //已选择成员列表
			selected: [],
            selectedObject: [],
            // 职位列表
            position_list: [],
            //已选择用户弹框
            selected_visible: false,
            //已选择的已选择成员列表
            selectedMembers: [],
            //临时de已选择的成员列表(用于确认的时候判断是否与“已选择的成员列表”相同，不同则代表有删除)
            temporary_selected: []
        }
    },
    watch: {
    },
    mounted(){
        this.getSelectData();
    },
    methods:{
        //数据变化
        changedData(res, tableData){
            console.log(res);
            if(this.selected && this.selected.length){
                this.selected.forEach(item => {
                    tableData.forEach(itm => {
                        if(item.id === itm.id){
                            this.$refs.table_member_all.toggleRowSelection(itm, true)
                        }
                    })
                })
            }
        },
        //确定是否修改已选择成员
        handleChange(){
            if(this.temporary_selected.length != this.selected.length){
                this.selected = this.temporary_selected
                this.selected_visible = false
                this.$refs.table_member_all.reload();
            }else{
                this.selected_visible = false
            }   
        },
        //移除已选择的成员（多选）
        deleteSelectedMembers(){
             if(this.temporary_selected.length === this.selectedMembers.length){
                this.temporary_selected = []
                this.selectedMembers = []
             }else{
                this.temporary_selected = this.temporary_selected.filter((item) => {
                    let haveIndex = this.selectedMembers.findIndex(itm => { return itm.id === item.id })
                    console.log(haveIndex, "haveIndex");
                    if(haveIndex == -1){
                        return item
                    }
                })
                this.selectedMembers = []
             }
        },
        //移除已选择的成员
        table_delete(row, index){
            console.log(row);
            this.temporary_selected.splice(index, 1)
        },
        //打开已选择的成员列表查看
        openSelection(){
            this.temporary_selected = JSON.parse(JSON.stringify(this.selected))
            console.log(this.temporary_selected, 'aaaaaa')
            this.selected_visible = true
        },
        //选择已选择的成员
        selectionMembers(e){
            this.selectedMembers = e
        },
        open(arr){
            if(arr && arr.length) this.selected = arr
            this.visible = true
        },
        //加载部门职位职级数据(列表查询条件)
        async getSelectData(){
            //获取所有职位
            var res_position = await this.$API.users.position.all_list.get();
            if(res_position.error == 0) this.position_list = res_position.data
        },
        // 确认选择
        async submitAdd(){
            let members = this.selected
            this.$refs.table_member_all.clearSelection()
            this.selected = []
            this.visible = false
            this.$emit('submit', members)
        },
        selectionAll(e){
            console.log(e, "全选");
            if(e.length){
                this.selected = Array.from(new Set(this.selected.concat(e)))
            }else{
                let nowDataIds = this.$refs.table_member_all.tableData
                nowDataIds.forEach(item => {
                    this.selected.forEach((itm, idx) => {
                        if(item.id === itm.id){
                            this.selected.splice(idx, 1)
                        }
                    })
                })
            }
        },
        // 选择员工管理员(单选)
        selectOne(e, row){
            console.log(e, row, '单选');
            let index = this.selected.findIndex(item => { return row.id == item.id })
            if(index != -1){
                this.selected.splice(index, 1)
            }else{
                this.selected.push(row)
            }
        },
        // 关闭显示选择成员弹框
        close(){
            this.visible = false
        },
        // 搜索
        upsearch(){
            this.$refs.table_member_all.upData(this.search)
        },
    }
}
</script>

<style>
</style>